﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jcrop</title>
    <link href="../Content/jcrop/jquery.Jcrop.min.css" rel="stylesheet" />
    <style>
        .flow {
            position: absolute;
            z-index: 999;
            text-align: center;
            color: red;
            font-weight: bolder;
            border: 1px solid red;
            font-family: Consolas;
            font-size: xx-large;
        }

            .flow p {
            }
    </style>
    <script src="../Scripts/jquery-1.8.2.js"></script>
    <script src="../Scripts/jquery.Jcrop.js"></script>
    <script src="../Scripts/json2.js"></script>
</head>
    <body>
        <input type="file" name="name" multiple="" accept="image/jpeg,image/png" />
        <div id="container" style="position:relative">
            <img src="../Images/pool.jpg" />
        </div>
        <div id="info"></div>
        <div>
            <input type="text" id="name" value="" />
            <input type="button" value="Add" id="add" />
            <input type="button" value="Preview" id="preview" />
            <input type="button" value="Edit" id="edit" />
            <input type="button" value="Clear" id="clear" />
        </div>
        <ol id="list"></ol>
        <script>
            var arr = [], current, jcrop_api;
            function callme(obj) {
                current = obj;
                $('#info').html(JSON.stringify(obj));
            }
            function onRelease() {
                $('#container>div.flow').show();
            }
            $(function () {
                $('img').Jcrop({ onChange: callme, onSelect: callme, onRelease: onRelease }, function () {
                    jcrop_api = this;
                });
            })
            $('#add').click(function () {
                if (current != null) {
                    current.name = $('#name').val();
                    arr.push(current);
                    $('#list').append('<li>' + JSON.stringify(current) + '</li>');
                }
                current = null;
                $('#name').val('');
                jcrop_api.release();
            })
            $('#preview').click(function () {
                $('#container>div.flow').remove();
                jcrop_api.release();
                jcrop_api.disable();
                //debugger;
                var StyleFormat = 'left:[x]px;top:[y]px;width:[width]px;height:[height]px;';
                for (var i in arr) {
                    var t = $('<div/>', {
                        style: StyleFormat.replace('[x]', arr[i].x)
                            .replace('[y]', arr[i].y)
                            .replace('[width]', arr[i].w)
                            .replace('[height]', arr[i].h),
                        html: '<p>' + arr[i].name + '</p>',
                        Class: 'flow'
                    });
                    (function (tmp) {
                        t.bind({ click: flowclick }).data('jscropData', tmp);
                    })(arr[i]);
                    $('#container').append(t);
                }
            })
            function mouseover() {
                jcrop_api.setSelect($(this).data('jscropData'));
            }
            function mouseout() {
                jcrop_api.release();
            }
            function flowclick() {
                // jcrop_api.release();
                $(this).hide().siblings('.flow').show();
                var t = $(this).data('jscropData');
                //jcrop_api.setOptions({
                //    allowSelect: true,
                //    allowMove: true,
                //    allowResize: true,
                //    setSelect:[t.x,t.y,t.x2,t.y2]
                //});
                //jcrop_api.setSelect(t);
                jcrop_api.enable();
                jcrop_api.setSelect([t.x, t.y, t.x2, t.y2]);
            }
            $('#edit').click(function () {
                $('#container>div.flow').remove();
                jcrop_api.enable();
            })
            //$('#container').click(function () {
            //    debugger;
            //    var t = $(this).children('.flow:hide');
            //    t.show();
            //});
            $('#clear').click(function () {
                $('#container>div.flow').remove();
                jcrop_api.release();
                jcrop_api.enable();
                $('#info,#list').empty();
                $('#name').val('');
                arr = [];
            })
        </script>
    </body>
</html>
